<template>
  <n-flex>
    <n-space>
      <n-button type="primary" tertiary strong @click="add">
        <template #icon>
          <n-icon>
            <AddOutline/>
          </n-icon>
        </template>
        新增
      </n-button>
      <n-button type="warning" tertiary strong @click="getConfigList">
        <template #icon>
          <n-icon>
            <RefreshOutline/>
          </n-icon>
        </template>
        刷新
      </n-button>
    </n-space>
    <n-data-table
        striped
        size="small"
        :columns="columns"
        :data="data"
        :bordered="true"
    />
  </n-flex>
  <pro-modal-form
      :form="modalForm"
      :loading="commonStore.loading"
      title="配置"
      preset="card"
      label-width="80"
      label-placement="left"
      :reset-button-props="{
      content: '关闭',
      tooltip: '关闭弹窗',
    }"
      :submit-button-props="{
      content: '提交',
      tooltip: '提交表单',
    }"
  >
    <pro-input
        title="ID"
        path="id"
        readonly
    />
    <pro-input
        title="名称"
        path="name"
    />
    <pro-input
        title="内容"
        path="content"
    />
    <pro-textarea
        title="描述"
        path="desc"
    />
  </pro-modal-form>
</template>

<script setup lang="ts">
import {h, onMounted, ref} from "vue";
import {useCommonStore} from "../store/common";
import {ConfigEntity} from "../../bindings/quant/backend/entity";
import {ConfigManager} from "../../bindings/quant/backend/manager";
import {createProModalForm, ProInput, ProModalForm, ProTextarea} from "pro-naive-ui";
import {NButton, NIcon} from "naive-ui";
import {AddOutline, CreateOutline, RefreshOutline} from "@vicons/ionicons5";

const readonly = ref(false)
const commonStore = useCommonStore()
const columns = [
  //   {
  //   title: "ID",
  //   key: "id",
  // },
  {
    title: "名称",
    key: "name"
  },
  {
    title: "内容",
    key: "content"
  },
  {
    title: "描述",
    key: "desc"
  },
  {
    title: '操作',
    key: 'actions',
    render(row: ConfigEntity) {
      return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            type: 'primary',
            size: 'small',
            tooltip: {content: '编辑'},
            onClick: () => edit(row)
          },
          // {default: () => "编辑"}
          {icon: () => h(NIcon, null, {default: () => h(CreateOutline)})}
      )
    }
  }
];
let data = ref<ConfigEntity[]>()
const modalForm = createProModalForm<ConfigEntity>({
  onSubmit: async (entity: ConfigEntity) => {
    commonStore.loading = true
    // window.$message?.success('更新成功')
    console.log(entity)
    if (entity.id > 0) {
      ConfigManager.Update([], entity.id, entity).then(() => {
        getConfigList()
        modalForm.close()
      }).catch((err) => {
        window.$message?.error("更新数据出错：" + err);
      }).finally(() => {
        commonStore.loading = false
      })
    } else {
      ConfigManager.Create(entity).then(() => {
        getConfigList()
        modalForm.close()
      }).catch((err) => {
        window.$message?.error("保存数据出错：" + err);
      }).finally(() => {
        commonStore.loading = false
      })
    }
  },
})

function edit(row: ConfigEntity) {
  readonly.value = true
  console.log("edit:id=", row.id);
  modalForm.values.value = row
  modalForm.open()
}

const add = () => {
  readonly.value = false
  let entity = new ConfigEntity()
  entity.name = ''
  entity.content = ''
  entity.desc = ''
  modalForm.values.value = entity
  modalForm.open()
}

const getConfigList = () => {
  ConfigManager.FindAll().then((result: ConfigEntity[]) => {
    data.value = result
  }).catch((err: Error) => {
    window.$message?.error("获取数据出错：" + err);
  })
}

onMounted(() => {
  getConfigList()
})
</script>


<style scoped>

</style>